<template>
  <div class="bg">
    <!-- 顶部标题 -->
    <div class="top">搭配助手</div>

    <!-- 聊天内容区域 -->
    <div class="chat-wrapper">
      <div
        class="chat-item"
        v-for="(item, index) in chatList"
        :key="index"
        :class="item.from"
      >
        <div v-show="!item.url && !item.follow_up" class="bubble">{{ item.msg }}</div>
        <img style="max-width: 70%;" v-show="item.url" :src='item.url'/>
        <div v-show="item.follow_up">
          <van-button v-for="button in item.follow_up" :key="button" round @click="send(button)">{{ button }}</van-button>
        </div>
        
      </div>
    </div>

    <!-- 输入框 -->
    <div class="input-wrapper">
      <input
        v-model="inputValue"
        class="chat-input"
        type="text"
        placeholder="请输入你的穿搭问题..."
        @keydown.enter="sendMsg"
      />
      <button class="send-btn" @click="sendMsg">发送</button>
    </div>
  </div>
  <Tabbar />
</template>

<script setup>
import { ref } from "vue";
import Tabbar from "@/components/common/Tabbar.vue";
import { handleAIResult } from "../api/handle";
import { sentMsg, getMsg, queryMsgCompleted } from "../api/msg";
const inputValue = ref("");
const chatList = ref([
  { from: "ai", msg: "你好，我是你的AI穿搭助手，请问需要什么帮助？" },
]);

const sendMsg = async () => {
  if (inputValue.value.trim() === "") return;
  chatList.value.push({ from: "user", msg: inputValue.value });
  const res = await sentMsg(inputValue.value);
  inputValue.value = ""; // 清空输入框
  const { conversation_id, id } = res.data;
  // 简单模拟 AI 回复
  chatList.value.push({
    from: "ai",
    msg: "我正在分析你的问题，请稍等片刻。",
  });

  await queryMsgCompleted(conversation_id, id, 2000);// 每隔2s查询信息
  const msgList = await getMsg(conversation_id, id);
  const classifyMsg = handleAIResult(msgList.data);

  chatList.value.pop(); // 删除上一个 AI 回复
  chatList.value.push({ from: "ai", url: classifyMsg.picUrl })
  chatList.value.push({ from: "ai", msg: classifyMsg.answer });
  chatList.value.push({ from: "ai", follow_up: classifyMsg.follow_up });
  console.log(res)
};
const send = (button) => {
  chatList.value.push({ from: "user", msg: button });
  sendMsg();
}
</script>

<style scoped>
.bg {
  background: linear-gradient(to right, #dbeafe, #d1fae5);
  height: 100vh;
  padding-top: 3rem; /* 顶部高度 */
  padding-bottom: 4rem; /* 底部输入框高度 */
  display: flex;
  flex-direction: column;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #4182ff;
  background-color: #ffffff;
  padding: 10px;
  font-size: 40px;
  font-weight: bold;
  z-index: 10;
  border-bottom: 1px solid #e0e0e0;
}

.chat-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.chat-item {
  display: flex;
  margin-bottom: 5px;
}

.chat-item.user {
  justify-content: flex-end;
}

.chat-item.ai {
  justify-content: flex-start;
}

.bubble {
  max-width: 70%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.4;
}

.chat-item.user .bubble {
  background-color: #4182ff;
  color: white;
  border-bottom-right-radius: 0;
}

.chat-item.ai .bubble {
  background-color: #fff;
  color: #333;
  border-bottom-left-radius: 0;
}

.input-wrapper {
  height: 50px;
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 5px;
  background-color: #ffffff;
  display: flex;
  gap: 5px;
  border-top: 1px solid #e0e0e0;
}

.chat-input {
  flex: 1;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid #ccc;
  font-size: 19px;
}

.send-btn {
  background-color: #4182ff;
  color: white;
  padding: 5px 10px;
  height: 50px;
  border: none;
  border-radius: 9px;
  font-size: 19px;
  cursor: pointer;
  margin-bottom: 100px;
}
</style>
